<template>
    <header>
        <el-col  class="left">CCS商城管理后台</el-col>
        <el-col :span="14"></el-col>
        <div class="header-right box">
            <div class="role-name"><span>{{dateStr}}</span> 当前身份：{{roleName}}</div>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    <img alt="Avatar" :src="avatarUrl?avatarUrl:require('../../images/avatar.png')">
                    <div class="manager">{{manager}}<img alt="Avatar" src="../../images/down.png" class="down"></div>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">重置密码</el-dropdown-item>
                    <el-dropdown-item command="1">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
export default {
    data () {
        return {
            menuShow:false,
            manager:'',
            roleName:'',
            dateStr:'',
            avatarUrl:''
        }
    },
    created(){
        var myDate = new Date(),
            year = myDate.getFullYear(),   //获取完整的年份(4位,1970-????)
            month = myDate.getMonth(),      //获取当前月份(0-11,0代表1月)
            date = myDate.getDate(),       //获取当前日(1-31)
            day = myDate.getDay();        //获取当前星期X(0-6,0代表星期天)
            var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
           let str = `${year}-${month+1}-${date}  ${weekday[day]}`
        this.dateStr = str
    },
    mounted(){
        this.getManager();
    },
    methods:{
        getManager(){
            this.manager = sessionStorage.getItem('manager')?sessionStorage.getItem('manager'):'管理员'
            this.roleName = sessionStorage.getItem('roleName')
            this.avatarUrl = sessionStorage.getItem('avatarUrl')
        },
        handleCommand(command){
            if(command == '1'){
                this.$router.push("/loginPage");
            }else{
                this.$router.push("/rechargePassword");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    header{
        position: fixed;
        display: flex;
        -webkit-display: flex;
        align-items: center;
        -webkit-align-items: center;
        height: 80px;
        background-color: rgb(62, 135, 218);
        color: #fff;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        font-size: 16px;
        font-weight: 700;
        // border-bottom: 3px solid #36c;
        // position: relative;
        .header-right{
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            font-style: normal;
            display: flex;
            min-width: 550px;
            align-items: center;
            justify-content: right;
            .role-name{
                text-align: right;
                margin-right: 30px;
                span{
                    margin-right: 40px;
                }
            }
        }
        .manager{
            position: relative;
            padding-right: 50px;
            img{
                position: absolute;
                width: 15px;
                height: auto;
                right: 0;
                top:2px;
            }
            .down{
                border-radius: 0;
                top:2px;
                margin-left: 10px;
            }
        }
        .left{ width: 205px;background-color:rgb(62, 135, 218);color: #fff;height: 80px;line-height: 80px;text-align: center;font-size: 18px;
                position: absolute;left: 0;top:0;}
        .el-col-18 {padding-left: 255px;}
    }
    .el-dropdown{
        position: absolute;
        right: 30px;
        display: block;
        margin-left: 10%;
        float: right;
        top:20px;
    }
    .el-dropdown-link{
        display: flex;
        -webkit-display: flex;
        align-items: center;
        -webkit-align-items: center;
        cursor: pointer;
        span{
            color: #0E932E;
        }
        .manager{
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            font-style: normal;
        }

        img{
            position: relative;
            margin-right: 20px;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            -webkit-border-radius: 50%; 
        }
    }
</style>
